<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
      :leave-active-class="proxy?.animate.searchAnimate.leave">
      <searchrevealing>
        <el-tabs v-model="activeTab">
          <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="104px">
            <el-form-item label="商品名称" prop="styleName">
              <el-input v-model="queryParams.styleName" placeholder="请输入商品名称" clearable style="width: 220px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="类目" prop="categoryIdList">
              <el-cascader v-model="queryParams.categoryIdList" clearable :options="categoryProps" filterable
                collapse-tags :props="props" style="width: 220px" @change="handleChange" placeholder="请选择类目"
                ref="categoryRef" />
            </el-form-item>
            <el-form-item label="供应商" prop="supplierId">
              <el-select v-model="queryParams.supplierId" placeholder="请选择供应商" clearable filterable
                v-selectLoad="selectLoad" :teleported="false" :fit-input-width="true" remote
                :remote-method="searchQuery" class="supplierSelect" style="width: 220px" :loading="supplierQueryLoading"
                @clear="handleClear">
                <el-option v-for="dict in supplierNameOptions" :key="dict.value" :label="dict.label"
                  :value="dict.value">
                </el-option>
                <template v-if="supplierLoading">
                  <div class="supplierSelect_icon">
                    <el-icon class="el-select-loading__icon">
                      <Loading />
                    </el-icon>
                    <span class="el-select-loading__tips">{{ "正在加载" }}</span>
                  </div>
                </template>
                <template #loading>
                  <svg class="circular" viewBox="0 0 50 50">
                    <circle class="path" cx="25" cy="25" r="20" fill="none" />
                  </svg>
                </template>
              </el-select>
            </el-form-item>

            <el-form-item label="商品编码/69码" prop="styleCode">
              <el-input v-model="queryParams.styleCode" placeholder="请输入" clearable style="width: 220px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="库存状态" prop="shelvesStatus">
              <el-select v-model="queryParams.shelvesStatus" placeholder="请选择库存状态" clearable filterable
                style="width: 220px">
                <el-option label="已入库" :value="1" />
                <el-option label="已上架" :value="2" />
                <el-option label="已下架" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="库存编码" prop="stockCode">
              <el-input v-model="queryParams.stockCode" placeholder="请输入库存编码" clearable style="width: 220px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="部门类型" prop="recruiterDeptId">
              <el-select v-model="queryParams.recruiterDeptId" placeholder="请选择部门类型" clearable filterable
                @change="departmentTypeChange" style="width: 220px">
                <el-option v-for="dict in departmentTypeList" :key="dict.deptId" :label="dict.deptName"
                  :value="dict.deptId" />
              </el-select>
            </el-form-item>
            <el-form-item label="部门名称" prop="recruiterDeptIds">
              <el-select v-model="queryParams.recruiterDeptIds" placeholder="请选择部门名称" clearable filterable
                @change="deptChange" style="width: 220px">
                <el-option v-for="dict in deptList" :key="dict.deptId" :label="dict.deptName" :value="dict.deptId" />
              </el-select>
            </el-form-item>
            <el-form-item label="人员名称" prop="recruiterUserId">
              <el-select v-model="queryParams.recruiterUserId" placeholder="请选择人员名称" clearable filterable
                style="width: 220px">
                <el-option v-for="dict in recruiterList" :key="dict.userId" :label="dict.nickName"
                  :value="dict.userId" />
              </el-select>
            </el-form-item>

            <el-form-item label="选品部门" prop="coreId">
              <el-select style="width: 220px" v-model="queryParams.coreId" placeholder="请选择" clearable filterable>
                <el-option v-for="dict in anchorList" :key="dict.deptId" :label="dict.deptName"
                  :value="dict.deptId"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="能否可破价" prop="discountPrice">
              <el-select style="width: 220px" v-model="queryParams.discountPrice" placeholder="请选择" filterable
                clearable>
                <el-option v-for="dict in discountPriceList" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="备注" prop="inAuditRemark">
              <el-input v-model="queryParams.inAuditRemark" placeholder="请输入备注" clearable style="width: 220px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="招商入库时间" prop="inStockTime">
                            <el-date-picker value-format="YYYY-MM-DD" v-model="queryParams.inStockTime" type="date"
                                placeholder="请选择出库时间" clearable style="width: 220px" />
                        </el-form-item> -->
            <el-form-item label="入库时间" prop="putTime">
              <el-date-picker value-format="YYYY-MM-DD" v-model="putTime" type="daterange" @change="pickerChange"
                start-placeholder="开始时间" end-placeholder="结束时间" clearable style="width: 220px" />
            </el-form-item>
            <el-form-item label="对接群名" prop="groupName">
              <el-input v-model="queryParams.groupName" placeholder="请输入对接群名" clearable style="width: 220px"
                @keyup.enter="handleQuery" maxlength="20" />
            </el-form-item>
            <el-form-item label="供应商手机号" prop="supplierPhone">
              <el-input v-model="queryParams.supplierPhone" placeholder="请输入手机号" clearable style="width: 220px"
                @keyup.enter="handleQuery" />
            </el-form-item>
          </el-form>
          <div class="form_button">
            <el-button type="primary" @click="handleQuery" :loading="queryLoading">查询</el-button>
            <el-button @click="resetQuery" :loading="queryLoading">重置</el-button>
          </div>
        </el-tabs>
      </searchrevealing>
    </transition>
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" v-hasPermi="['hm:product:offEdit']">
            <el-button type="primary" @click="productDelisting('batch')" :disabled="ids.length == 0">商品下架</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" @click="exportHandCard">导出手卡信息</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'产品部商品管理'"
            @updateColumn="getColmun"></right-toolbar>
        </el-row>
      </template>
      <el-table v-loading="loading" row-key="id" :data="supplierAddProductsList" :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange" border @header-dragend="dragEnd" ref="tableRef">
        <el-table-column type="selection" width="55" align="center" :selectable="setSelection" />
        <el-table-column v-for="(item, index) in productLibraryColumns" :key="index" :label="item.label" align="center"
          :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
          <template #default="scope">
            <image-preview v-if="item.prop == 'productImage'" :src="scope.row.productImage" :width="50" :height="50" />
            <span v-if="item.prop == 'stockInfo?.stockAvailable'">{{ scope.row.stockInfo?.stockAvailable }}
            </span>
            <span v-if="item.prop == 'supplierName'">{{ scope.row.supplierVo?.supplierName }}
            </span>
            <span v-if="item.prop == 'stockInfo?.locationName'">{{ scope.row.stockInfo?.locationName }}
            </span>
            <span v-if="item.prop == 'warehouse'">{{ scope.row.warehouse ? '是' : '否' }}</span>
            <div v-if="item.prop == 'mechanismList'">
              <div>{{ computedMechanism(scope.row.mechanismList && scope.row.mechanismList[0] || null,
                '一') }}</div>
              <div>{{ computedMechanism(scope.row.mechanismList && scope.row.mechanismList[1] || null,
                '二') }}</div>
              <div>{{ computedMechanism(scope.row.mechanismList && scope.row.mechanismList[2] || null,
                '三') }}</div>
            </div>
            <span v-if="item.prop == 'shelvesStatus'">{{ scope.row.shelvesStatus == 1
              ?
              '已入库' :
              scope.row.shelvesStatus == 2 ? '已上架' : '已下架' }} </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleInfo(scope.row)" class="color_theme">查看详情</el-button>
            <el-button link type="primary" @click="handleGrounding(scope.row)" class="color_theme"
              style="margin-left: 0px !important" v-if="scope.row.shelvesStatus === 3"
              v-hasPermi="['hm:product:grounding']">商品上架</el-button>
            <el-button v-if="scope.row.shelvesStatus === 2" link type="primary"
              @click="productDelisting('one', scope.row)" class="color_theme" style="margin-left: 0px !important"
              v-hasPermi="['hm:product:offEdit']">商品下架</el-button>
            <el-button link type="primary" @click="sampleInvitation(scope.row)" class="color_theme" v-if="scope.row.shelvesStatus != 3"
              style="margin-left: 0px !important" v-hasPermi="['hm:product:sample']">补样邀约</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
    </el-card>
    <!--商品详情抽屉 -->
    <productLibraryDetails @doClose="commoditydetailsClose" @handleInfo="handleInfo"
      :commoditydetailsData="commoditydetailsData" :dialogInfoVisible="dialogInfoVisible"></productLibraryDetails>

    <!-- 补样邀约 -->
    <el-dialog v-model="sampleInvitationDialogVisible" title="补样邀约" width="500" :before-close="sampleBeforeClose">
      <el-form ref="sampleInvitationRef" :model="sampleInvitationform" style="width: 100%" :inline="true"
        label-width="90px">
        <el-row class="hm-row3" :gutter="60">
          <el-col :span="24">
            <el-form-item label="供应商：" prop="supplierName">
              <span>{{ sampleInvitationDialogData.supplierName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品名称：" prop="styleName">
              <span>{{ sampleInvitationDialogData.styleName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="补样数量：" prop="count">
              <el-input-number v-model="sampleInvitationform.count" :min="1" :max="999" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="sampleBeforeClose">取消</el-button>
          <el-button :loading="downLoading" type="primary" @click="handleSave(sampleInvitationRef, 'sample')">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 商品下架原因 -->
    <el-dialog v-model="offShelfDialogVisible" title="下架原因" width="500" :before-close="offShelBeforeClose">
      <el-form ref="offShelRef" :model="offShelform" style="width: 100%" :inline="true" :rules="offShelrules"
        label-width="90px">
        <el-row class="hm-row3" :gutter="60">
          <el-col :span="24">
            <el-form-item label="下架原因" prop="reason">
              <el-input v-model="offShelform.reason" placeholder="请输入200字符以内" clearable :rows="4" style="width: 350px;"
                maxlength="200" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="offShelBeforeClose">取消</el-button>
          <el-button :loading="downLoading" type="primary" @click="handleSave(offShelRef, 'offShel')">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="ProductLibrary" lang="ts">
const { proxy } = getCurrentInstance() as any;
import productLibraryDetails from '@/views/group/productOutbound/components/productLibraryDetails.vue';
import { QualityControlForm, QualityControlQuery } from '@/api/group/qualityControl/types';
import { queryProductList, scanProductLook, grounding, addSampleInvitation, categoryList } from '@/api/system/supplierAddProducts';
import { SupplierAddProductsVO } from '@/api/system/supplierAddProducts/types';
import { getUserList, getSystemList } from '@/api/group/qualityControl';
import { loginSupplierList } from '@/api/group/supplier/index';
import { removeInvalidNodes } from '@/utils/index';
import type { FormInstance } from 'element-plus';
import { queryOperationDeptList } from '@/api/group/productSelectionPricing'
const productLibraryColumns = ref();
const columnData = ref();
const props = { label: 'categoryName', value: 'categoryId', multiple: true }
// 部门类型
const departmentTypeList = ref();

const activeTab = ref('qualityControl');
const showSearch = ref(true);
const loading = ref(true);
const total = ref(0);
const supplierAddProductsList = ref<SupplierAddProductsVO[]>([]);
const queryFormRef = ref<ElFormInstance>();
const ids = ref<Array<any>>([]);
const commoditydetailsData = ref<QualityControlForm>({});
const dialogInfoVisible = ref(false);
const deptList = ref<{ deptId: string; deptName: string }[]>([]);
const recruiterList = ref<{ userId: string; nickName: string }[]>([]);
const categoryRef = ref();
const anchorList = ref<{ deptName: string; deptId: string }[]>([]);
const queryLoading = ref(false);
const tableRef = ref()

// 下架
const downLoading = ref(false);
const offShelfDialogVisible = ref(false);
const offShelRef = ref<FormInstance>();
const offShelform = ref<{ reason?: string }>({
  reason: undefined
});
const offShelrules = ref({
  reason: [{ required: true, message: '下架原因不能为空', trigger: 'blur' }]
});

// 补样邀约
const sampleInvitationDialogVisible = ref(false)
const sampleInvitationDialogData = ref();
const sampleInvitationRef = ref<FormInstance>();
const sampleInvitationform = ref<{ count?: number }>({
  count: 1
});

// 时间
const putTime = ref();

const initFormData: QualityControlForm = {
  id: undefined,
  auditing: undefined
};
const data = reactive<PageData<QualityControlForm, QualityControlQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    styleName: undefined,
    recruiterDeptId: undefined,
    recruiterDeptIds: undefined,
    recruiterUserId: undefined,
    supplierId: undefined,
    styleCode: undefined,
    shelvesStatus: undefined,
    stockCode: undefined,
    coreId: undefined,
    discountPrice: undefined,
    inAuditRemark: undefined,
    inStockTime: undefined,
    inStartTime: undefined,
    inEndTime: undefined,
    type: undefined,
    categoryIdList: [],
    groupName: undefined,
    supplierPhone: undefined
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);
const categoryProps = ref([]);
const discountPriceList = reactive([
  { label: '能', value: '能' },
  { label: '否', value: '否' }
]);
const supplierNameOptions = ref<any[]>([]);
const supplierNameDate = ref({
  pageNum: 1,
  pageSize: 10,
  supplierName: ''
});
const supplierQueryLoading = ref(false);
const supplierLoading = ref(true);
const supplierNametotal = ref();

// 判断只有已上架的商品才能进行勾选
const setSelection = (row: any) => {
  return row.shelvesStatus === 2;
};
/**
 * 直播机制
 */
const computedMechanism = (row: any, numbers: string) => {
  if (row) {
    const price = row.price ? row.price : '-';
    const commission = row.commission ? row.commission + '%' : '-';
    const brokerage = row.brokerage ? row.brokerage + '%' : '-';
    const liveStreamingMechanism = row.liveStreamingMechanism ? row.liveStreamingMechanism : '-';
    const costPrice = row.costPrice ? row.costPrice : '-';
    if (row.cooperationMode) {
      if (row.cooperationMode == '分佣') {
        return (
          '机制' +
          numbers +
          ': ' +
          '售价:' +
          price +
          ' 佣金:' +
          commission +
          ' 补充佣金:' +
          brokerage +
          ' 机制:' +
          liveStreamingMechanism +
          ' 成本:' +
          costPrice
        );
      } else {
        return '机制' + numbers + ': ' + '成本:' + costPrice + ' 机制:' + liveStreamingMechanism;
      }
    }
  }
};
/** 下架行class */
const tableRowClassName = ({ row }: any) => {
  if (row.shelvesStatus === 3) {
    return 'warning-row';
  }
}
/** select懒加载 */
const selectLoad = async () => {
  if (supplierNameOptions.value.length < supplierNametotal.value) {
    supplierNameDate.value.pageNum++;
    getHmSupplierList();
  }
};
// 获取供应商列表
const getHmSupplierList = async () => {
  supplierLoading.value = true;
  const res = await loginSupplierList(supplierNameDate.value);
  const reshandle = res.rows.map((item: any) => ({
    label: item.supplierName,
    value: item.id
  }));
  supplierNameOptions.value.push(...reshandle);
  supplierNametotal.value = res.total;
  supplierLoading.value = false;
};
/** 远程搜索 */
const searchQuery = async (query: string) => {
  supplierQueryLoading.value = true;
  supplierNameOptions.value = [];
  supplierNameDate.value.pageNum = 1;
  supplierNameDate.value.pageSize = 10;
  supplierNameDate.value.supplierName = query;
  await getHmSupplierList();
  supplierQueryLoading.value = false;
};
/** 清空供应商 */
const handleClear = () => {
  supplierNameDate.value.supplierName = '';
  supplierNameOptions.value = [];
  supplierNameDate.value.pageNum = 1;
  supplierNameDate.value.pageSize = 10;
  getHmSupplierList();
};
// 获取选品部门
const getAnchor = async () => {
  const res = await queryOperationDeptList()
  anchorList.value = res.data
};
/**
 * 获取部门类型
 */
const getdeptType = async () => {
  const res = await getSystemList({ parentId: '1861962988832542721' });
  departmentTypeList.value = res.data;
};
/**
 * 部门筛选
 */
const departmentTypeChange = async (parentId: string) => {
  if (parentId) {
    queryParams.value.recruiterDeptIds = undefined;
    queryParams.value.recruiterUserId = undefined;
    const res = await getSystemList({ parentId });
    deptList.value = res.data;
    recruiterList.value = [];
  } else {
    deptList.value = [];
    recruiterList.value = [];
    queryParams.value.recruiterDeptIds = undefined;
    queryParams.value.recruiterUserId = undefined;
  }
};
/**
 *  根据招商部获取招商员
 */
const deptChange = async (event: string) => {
  if (event) {
    const res = await getUserList({ deptId: event });
    recruiterList.value = res.rows;
    queryParams.value.recruiterUserId = undefined;
  } else {
    recruiterList.value = [];
    queryParams.value.recruiterUserId = undefined;
  }
};

// 查询类目
const getCategoryList = async () => {
  const { data = [] } = await categoryList({});
  categoryProps.value = removeInvalidNodes(data, 'categoryStatus');
};

// 筛选类目change事件
const handleChange = (val: [string, string, string, string]) => { };

/** 查询供应商添加商品列表 */
const getList = async () => {
  try {
    loading.value = true;
    const params = { ...queryParams.value, recruiterDeptId: queryParams.value.recruiterDeptIds || queryParams.value.recruiterDeptId };
    const { data } = await queryProductList(params);
    supplierAddProductsList.value = data?.rows || [];
    total.value = data?.total || 0;
    loading.value = false;
    queryLoading.value = false;
  } catch (e) {
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryLoading.value = true;
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  recruiterList.value = [];
  deptList.value = [];
  putTime.value = undefined;
  queryParams.value.inStartTime = undefined;
  queryParams.value.inEndTime = undefined;
  handleClear();
  handleQuery();
};
/** 完成时间筛选 */
const pickerChange = (val: string[]) => {
  if (val) {
    queryParams.value.inStartTime = val[0];
    queryParams.value.inEndTime = val[1];
  } else {
    queryParams.value.inStartTime = '';
    queryParams.value.inEndTime = '';
  }
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: SupplierAddProductsVO[]) => {
  ids.value = selection;
};

/** 查看商品详情 */
const handleInfo = (row?: SupplierAddProductsVO) => {
  nextTick(async () => {
    const _id = row?.id || ids.value[0].id;
    const res: any = await scanProductLook({ productId: _id });
    dialogInfoVisible.value = true;
    res.data.placeDeliverys = res.data.placeDelivery;
    res.data.productCategoryIs = res.data.productCategoryName?.indexOf('饰品') < 0 ? false : true;
    commoditydetailsData.value = res.data;
    let arr = res.data.stockImage ? res.data.stockImage.split(',') : [];
    let imgArr: Array<string> = [];
    arr.forEach((item: string) => {
      imgArr.push(import.meta.env.VITE_APP_PIC_URL + item);
    });
    commoditydetailsData.value.stockImageArr = imgArr;
  });
};
/** 商品详情关闭 */
const commoditydetailsClose = () => {
  dialogInfoVisible.value = false;
  getList();
};

/** 单选商品下架 */
const productDelisting = async (type: string, row?: QualityControlForm) => {
  if (type == 'one') {
    ids.value = [row];
  }
  offShelfDialogVisible.value = true;
};
/** 单选商品上架 */
const handleGrounding = async (row: QualityControlForm) => {
  await proxy?.$modal.confirm('是否确认将当前商品重新上架到原货架？');
  await grounding({
    stockProductsBoList: [
      {
        productsId: row.id,
        putType: 2, // 2上架 1下架
        locationCode: row.stockInfo?.locationName,
        stockCode: row.stockCode
      }
    ]
  });
  proxy?.$modal.msgSuccess('该商品状态变更为已上架，商品货架号恢复原货架号');
  getList();
};
/** 补样邀约 */
const sampleInvitation = (row: QualityControlForm) => {
  sampleInvitationDialogVisible.value = true;
  sampleInvitationDialogData.value = row;
}

/** 导出手卡信息 */
const exportHandCard = () => {
  const queryParam = JSON.parse(JSON.stringify(queryParams.value));
  queryParam.exportStartTime = queryParam.inStartTime;
  queryParam.exportEndTime = queryParam.inEndTime;
  delete queryParam.inStartTime;
  delete queryParam.inEndTime;
  proxy?.downloadAsync(
    'basic/warehouse/getStockProductExport',
    {
      ...queryParam
    },
    `商品手卡数据信息_${new Date().getTime()}.xlsx`
  );
};

/** 下架原因提交 */
const handleSave = async (formEl: FormInstance | undefined, type: string) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      downLoading.value = true;
      try {
        // 下架
        if (type == 'offShel') {
          const stockProductsBoList: any[] = [];
          ids.value.forEach((item) => {
            let obj = {
              putType: 1,
              locationCode: item?.stockInfo?.locationName,
              stockCode: item.stockCode,
              productsId: item.id,
              offShelfRemark: offShelform.value.reason
            };
            stockProductsBoList.push(obj);
          });
          await grounding({ stockProductsBoList });
          proxy?.$modal.msgSuccess('下架成功');
          offShelfDialogVisible.value = false;
          getList();
        } else { // 补样
          await addSampleInvitation({ productId: sampleInvitationDialogData.value.id, sampleNum: sampleInvitationform.value.count })
          proxy?.$modal.msgSuccess('补样成功');
          sampleBeforeClose();
          getList();
        }
        formEl.resetFields();
        downLoading.value = false;
      } catch (err) {
        downLoading.value = false;
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};
/** 获取colmun */
const getColmun = async () => {
  const columnDatas = await proxy?.useColumn('产品部商品管理');
  productLibraryColumns.value = columnDatas.columnCustom;
  columnData.value = columnDatas;
  queryParams.value.pageSize = columnDatas.columnPageSize || 10;
};
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
  columnData.value.columnCustom.map((item: any) => {
    if (item.prop == column.property) {
      item.width = newWidth;
    }
  });
  await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize);
};
/** 页数变化 */
const paginationChange = async () => {
  await getList();
  await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize);
  getColmun()
};
/** 下架原因关闭 */
const offShelBeforeClose = () => {
  offShelRef.value?.resetFields();
  offShelfDialogVisible.value = false;
  tableRef.value?.clearSelection();
};
/** 补样邀约关闭 */
const sampleBeforeClose = () => {
  sampleInvitationRef.value?.resetFields();
  sampleInvitationDialogVisible.value = false;
}

onMounted(async () => {
  queryParams.value.pageNum = 1;
  await getColmun();
  await getList();
  getdeptType();
  getAnchor();
  getCategoryList();
});
</script>
<style lang="scss" scoped>
:deep(tr.el-table__row.warning-row) {
  color: rgb(252, 37, 64) !important;
}

.form_button {
  display: flex;
  justify-content: flex-end;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}

.supplierSelect {
  :deep(.el-popper) {
    left: 0 !important;
    top: 34px !important;
    z-index: 7000 !important;
    width: 100% !important;
  }
}

:deep(.el-tabs__content) {
  overflow: visible !important;
}

.supplierSelect_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.el-select-loading__tips {
  color: #606266;
  font-size: 14px;
}
</style>